<template>
	<view class="page">
		<backTop v-if='toTop'></backTop>
		<status-bar :title="title"></status-bar>
		<view class="tabs" :style="{top:navHeight+System.statusBarHeight+'px'}">
			<v-tabs v-if='tabs.length > 0' v-model="current" :tabs="tabs" :items='1' @change="changeTab" nameKey='website_list_title'></v-tabs>
		</view>
		<view class="list" v-if='list && list.length > 0'>
			<view class="item" v-for="(item,i) in list" :key='i'>
				<view class="title lines2" :class="{showMore: i == currentIndex}">{{ item.website_article_title }}</view>
				<view class="title_info" :class="{showInfo:showInfo_index == i}"><rich-text :nodes="item.website_article_info"></rich-text></view>
				<view class="date_info" :class="{date_info_plus:showInfo_index == i}" v-if="item.website_article_info.length > 50" @click="showInfo_index = showInfo_index == i?-1:i">{{showInfo_index == i?'收起更多':'展示更多'}}</view>
				<view class="img-box">
					<image
						:src="item.website_article_img?imgUrl + item.website_article_img:staticUrl+'/images/imageLoading.png'"
						mode="widthFix" @click="previewImage(item.website_article_img)"></image>
					<!-- <text>查看详情</text> -->
				</view>
				<!-- <text class="moreTxt" @click="currentIndex = currentIndex == i?-1:i" v-if='item.website_article_info.length> 50'>
				{{item.website_article_info}}
					{{currentIndex == i?'收起':'全文'}}
				</text> -->
				<!-- <view class="video-box" v-if='item.hasVideo == 1'>
					<video src="" controls></video>
				</view> -->
				<!-- <view class="imgs flex-box" v-if='item.website_article_atlas'>
					<template v-if="item.website_article_atlas.split(',').length == 1">
						<image @click="previewImage(j,item.website_article_atlas.split(','))" v-for="(img,j) in item.website_article_atlas.split(',')" :key='j' :src="imgUrl + img" class="img1" mode="aspectFill"></image>
					</template>
					<image v-else @click="previewImage(j,item.website_article_atlas.split(','))" v-for="(img,j) in item.website_article_atlas.split(',')" :key='j' :src="imgUrl + img" class="img" mode="aspectFill"></image>
				</view> -->
				<view class="flex-box opt-box">
					<text class="flex"></text>
					<!-- <view class="flex-box align-center" v-if='item.website_article_atlas' @click="download(item.website_article_atlas.split(','))"> -->
<!-- 					<view class="flex-box align-center" v-if='item.website_article_atlas' @click="download(item.website_article_img.split(','))">
						<image :src="staticUrl+'/images/jh_up/icon-1001.png'" class="icon"></image>
						<text>下载图片</text>
					</view> -->
					<view class="flex-box align-center" @click="copy_text(item.website_article_info)">
						<image :src="staticUrl+'/images/jh_up/icon-1002.png'" class="icon"></image>
						<text>复制文本</text>
					</view>
					<view class="flex-box align-center" @click="poster1(item.website_article_id)">
						<image :src="staticUrl+'/images/jh_up/icon-1003.png'" class="icon"></image>
						<text>转发</text>
						<!-- <button 
						:data-id='item.website_article_id' 
						:data-title='item.website_article_title' 
						:data-info='item.website_article_info' 
						:data-img='item.website_article_img'
						open-type="share" class="share-btn"></button> -->
					</view>
				</view>
			</view>
			<view class="DiLine" v-if='showDiLine'>------我也是有底线的------</view>
		</view>
		<canvas style="width: 300px; height: 536px;position: fixed;top: -99999px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<view class="mask flex-box align-center flex-center" :style="{'padding-top': navHeight+'px'}" v-if='showPoster' @click="showPoster=false">
			 <view>
				 <image :src="posterImg" mode="widthFix" class="posterImg" :show-menu-by-longpress='true' @click.stop></image>
				 <view class="save-poster thmeBg" :style="{'--color':color}" @click.stop="saveEwm">
					 <text>下载海报</text>
				</view>
			 </view>
		</view>
		<empty v-if='noData' type='1' cat='3' msg='没有找到相关内容哦 ~'></empty>
	</view>
</template>
<script>
	let that,len = 0;
	import {mapState} from 'vuex';
	import '@/js_sdk/ican_H5Api/ican-H5Api'
	export default {
		data() {
			return {
				toTop: false,
				
				color: getApp().globalData.color,
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				title: '宣传素材',
				list_id: '',
				noData: false,
				tabs:[],
				current:0,
				currentIndex: -1,
				list:[],
				showDiLine: false,
				more: false,
				downloading: false,
				showPoster: false,
				posterImg:'',
				showInfo_index:-1,
				showInfo_index_plus:''
			};
		},
		onLoad() {
			that = this
			this.getCloumn()
		},
		onReachBottom() {
			if(this.more){
				this.get_sale_channel()
			}
		},
		methods:{
			showInfo_btn(index){
				let that = this;
				that.showInfo_index = index;
				that.showInfo_index_plus = index + 100;
			},
			showInfo_btn_plus(index){
				let that = this;
				that.showInfo_index = index+100;
				that.showInfo_index_plus = index
			},
			
			
			previewImage(imgArry) {
				let imgsArray = [];
				 imgsArray[0] = this.imgUrl+imgArry
				uni.previewImage({
					urls:imgsArray,
					indicator:'none'
				})
			},
			
			saveImgToLocal_haibao: function(imgUrl,index) {
				uni.downloadFile({
					url: that.imgUrl + imgUrl,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								if(index == len-1){
									uni.hideLoading()
									that.downloading = false
									uni.showToast({
										title: "保存成功",
										icon: "none"
									})
								}
							},
							fail: function() {
								uni.hideLoading()
								that.downloading = false
								uni.showToast({
									title: "保存失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
			
			//  下载图片
			download(imgs){
				if(that.downloading){return} // 正在下载
				len = imgs.length;
				uni.getSetting({ //获取相册授权
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() { //这里是用户同意授权后的回调
									uni.showLoading({
										title:'下载中'
									})
									that.downloading = true
									imgs.forEach((item,index)=>{
										that.saveImgToLocal_haibao(item,index)
									})
								},
								fail() { //这里是用户拒绝授权后的回调
									uni.showToast({
										title: "拒绝后将无法下载图片！",
										icon: "none"
									});
								}
							})
						} else { //用户已经授权过了
							uni.showLoading({
								title:'下载中'
							})
							that.downloading = true
							imgs.forEach((item,index)=>{
								that.saveImgToLocal_haibao(item,index)
							})
						}
					}
				})
				
			},
			
			//  复制文本
			copy_text:function(copyData){
				uni.setClipboardData({
					data: copyData,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"success"
						})
					}
				});
			},
			getCloumn() {
				that.$http.post({
					url: '/SRA_website/listInfo',
					data: {
						VeriCode: uni.getStorageSync('bid'),
						listId: '35947'
					}
				}).then(res => {
					if (res.code == 100) {
						if(res.data.list){
							that.tabs = res.data.list;
							that.list_id = res.data.list[0].website_list_id
							that.getList();
						}
					}
				})
			},
			getList() {
				that.noData = false
				that.more = false
				that.showDiLine = false
				this.$http.post({
					url: '/zzj_singleSaleApi/getArticle',
					data: {
						bid: uni.getStorageSync('bid'),
						listId: that.list_id,
						pagecount: 999,
						page: 1
					}
				}).then(res => {
					if(res.listTitle){
						that.title = res.listTitle
					}
					uni.setNavigationBarTitle({
						title: that.title
					})
					if(res.data){
						that.list = that.list.concat(res.data)
						if(res.data && res.data.length > that.pageNum - 1){
							that.more = true
							that.page ++
						}
					}
					if(!that.list || that.list.length < 1){
						that.noData = true
					}
					if(!that.more && that.page > 1){
						that.showDiLine = true
					}
				})
			},
			changeTab(e){
				that.list_id = that.tabs[e].website_list_id
				that.list = [] 
				that.page = 1
				that.getList()
			},
			
			//  转发
			poster1(website_article_id){
				that.$http.post({
					url: '/singleSaleApi/getArticleCode',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: uni.getStorageSync('bid'),
						website_article_id: website_article_id
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						uni.showLoading({
							title:'海报生成中···'
						})
						var context = uni.createCanvasContext('firstCanvas'),bg='',avatar='';
						if(res.data.poster){
							uni.downloadFile({
								url: that.imgUrl + res.data.poster,
								success: (e) => {
									bg = e.tempFilePath;
									context.drawImage(bg, 0, 0, 300,536);
									if(res.data.qrCodeImg){
										uni.downloadFile({
											url: that.imgUrl + res.data.qrCodeImg,
											success: (q) => {
												avatar = q.tempFilePath;
												context.drawImage(avatar, 218, 459, 62 ,62);
												context.draw(true,() => {
													uni.canvasToTempFilePath({
														canvasId: 'firstCanvas',
														success: (res) => {
															uni.hideLoading()
															that.showPoster = true
															that.posterImg = res.tempFilePath;
														},
														fail: (res) => {
															uni.hideLoading()
															uni.showToast({
																title: '图片加载失败',
																duration: 2000
															})
														}
													});
												});
											}
										})
									}else{
										uni.hideLoading()
										uni.showToast({
											title: '获取用户二维码出错！',
											icon: 'none'
										})
									}
								}
							})
						}else{
							uni.hideLoading()
							uni.showToast({
								title: '获取海报背景出错！',
								icon: 'none'
							})
						}
						
					}else{
						
					}
				})
			},
			
			//  下载图片
			saveEwm: function(e) {
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.saveImgToLocal();
								},
								fail() { 
									uni.showToast({
										title: "拒绝后将无法保存图片！",
										icon: "none"
									});
								}
							})
						} else { //用户已经授权过了
						 that.saveImgToLocal();
						}
					}
				})
			},
			//  保存海报图片
			saveImgToLocal: function(e) {
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImg,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败",
							icon: "none"
						});
					}
				})
			},
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share']),
		},
		onPageScroll(e) {
			if (e.scrollTop > 250) {
				this.toTop = true;
			} else {
				this.toTop = false
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: option.target.dataset.title,
				desc: option.target.dataset.info,
				path: '/pages/index/index?pageType=4&share_v_id=' + uni.getStorageSync('vid') +'&artId='+option.target.dataset.id,
				imageUrl: option.target.dataset.img?that.imgUrl + option.target.dataset.img: shareData.imageUrl
			}
		},
	}
</script>

<style lang="scss">
.page{
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 33;
	}
	.list{
		padding: 90rpx 0 20rpx 20rpx;
		.item{
			margin-bottom: 40rpx;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				text-align: justify;
				padding-right: 20rpx;
			}
			.img-box {
				width: 450rpx;
				position: relative;
				margin-top:10rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			.title_info{
				font-size:28rpx;
				height: 120rpx;
				overflow: hidden;
				color: #666666;
			}
			.isshow{
				display: none !important;
			}
			.showInfo{
				height: auto !important; 
			}
			.date_info {
				color: #b1b1b1;
				position: relative;
				margin: 15rpx 0;
				font-size: 30rpx;
				display: inline-block;
				padding-right: 35rpx;
			}
			.date_info_plus{
				color: #b1b1b1;
				position: relative;
				margin: 15rpx 0;
				font-size: 30rpx;
				display: inline-block;
				padding-right: 35rpx;
			}
			.date_info:after {
				content: "";
				width: 0;
				height: 0;
				border: 10rpx solid #b1b1b1;
				border-color: #b1b1b1 transparent transparent transparent;
				position: absolute;
				right: 0;
				top: 17rpx;
			}
			.date_info_plus:after{
				content: "";
				width: 0;
				height: 0;
				border: 10rpx solid #b1b1b1;
				border-color:transparent  transparent #b1b1b1 transparent;
				position: absolute;
				right: 0;
				top:8rpx;
			}
			.showMore{
				display: block;
			}
			.moreTxt{
				color: #14b9d4;
				position: relative;
				top: -16rpx;
			}
			.video-box{
				height: 380rpx;
				margin-bottom: 20rpx;
				padding-right: 20rpx;
				video{
					border-radius: 12rpx;
					background-color: #D8D8D8;
					width: 100%;
					height: 100%;
				}
			}
			.imgs{
				flex-wrap: wrap;
				.img{
					width: 234rpx;
					height: 234rpx;
					border-radius: 12rpx;
					margin-right: 4rpx;
					margin-bottom: 4rpx;
				}
				.img1{
					width: 710rpx;
					height: 380rpx;
					border-radius: 12rpx;
				}
			}
			.opt-box{
				padding: 24rpx 30rpx 0;
				.icon{
					width: 36rpx;
					height: 36rpx;
					margin: 0 12rpx 0 40rpx;
				}
				.flex-box{
					position: relative;
					.share-btn{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
						z-index: 1;
					}
				}
				
			}
		}
	}

	// 海报
	.save-poster{
		color: white;
		width: 222rpx;
		text-align: center;
		line-height: 66rpx;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
	}
	.posterImg{
		width: 600rpx;
		height: 1072rpx;
	}
}
</style>
